<template>
  <div class="root">
    <m-header title="添加评价">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content" id="content">
      <div class="evaluate-list">

        <div class="evaluate-list-item" v-for="(item,index) in evaluateList">
          <div class="evaluate-list-item-left">
            <div class="evaluate-list-item-left-avatar">
              <img class="avatar" :src="item.avatarUrl ? item.avatarUrl : defaultAvatar" />
            </div>
            <div class="evaluate-list-item-left-title">
              <p class="name">{{item.nickname}} </p>
              <p class="evaluate">
                {{item.content}}
              </p>
            </div>
          </div>
          <div class="evaluate-list-item-right">
            <span class="date">{{dateFormat(item.createTime)}}</span>
          </div>
        </div>

      </div>
      <mu-infinite-scroll :scroller="scroller" loadingText="正在加载..." :loading="loading" @load="getUserEvaluates(true)" />
      <m-none-data content='还没有人做出评价哦' v-if="evaluateList.length === 0" />
    </div>

    <div class="bottom">
      <mu-text-field hintText="在这输入您的评价，不超过60个字" class="inputC" v-model="evaluationContent" />
      <mu-raised-button label="发送" primary @click="makeEvaluation" />
    </div>

    <mu-dialog :open="scoreDialog" @close="closeDialog">
      <div class="score-dialog-body">
        <div class="score-dialog-msg"> 给TA打个分吧</div>
        <star-rating :padding="6" :star-size="36" border-color="#ffd055" :border-width="1" :show-rating="false" :rating="0" @rating-selected="setRating"></star-rating>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import mNoneData from '../components/none-data.vue'
  import defaultAvatar from '../assets/images/default_avatar.png'
  import util from '../util/util.js'

  export default {
    components: {
      mHeader,
      mNoneData
    },
    data() {
      return {
        defaultAvatar,
        evaluateList: [],
        num: 0,
        pageNo: 1,
        loading: false,
        hasMore: true,
        scroller: null,
        accountId: null,
        evaluationContent: '',
        scoreDialog: true
      }
    },

    computed: {
      myInfo() {
        return this.$store.state.myInfo;
      }
    },
    methods: {
      getUserEvaluates(isLoadMore) {

        if (isLoadMore) {
          console.log('LoadMore');
          if (!this.hasMore) return;
          this.pageNo++;
          this.loading = true;
        }

        var _this = this;
        this.$http.get('user/' + _this.accountId + '/evaluates', {
          params: {
            page: _this.pageNo
          }
        }).then(
          function (response) {
            if (response.data.code === '0') {
              _this.evaluateList = _this.evaluateList.concat(response.data.data.evaluateList);
              _this.num += response.data.data.evaluateList.length;

              if (response.data.data.evaluateList.length < 10) {
                _this.hasMore = false;
              }
              if (isLoadMore) {
                _this.loading = false;
              }
            }
          }
        );
      },

      makeEvaluation() {
        let _this = this;
        this.$http.post('evaluate/user/' + _this.accountId, {
          content: _this.evaluationContent
        }).then(
          function (response) {
            if (response.data.code === '0') {

              util.toast('评价成功');
              //在数组头部插入评论
              _this.evaluateList.unshift({
                avatarUrl: _this.myInfo.avatar,
                nickname: _this.myInfo.nickname,
                createTime: new Date().getTime(),
                content: _this.evaluationContent
              });
              _this.evaluationContent = '';
            }
          }
        );
      },

      dateFormat(timeMill) {
        // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
        var date = new Date(timeMill);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes();
        // var s = date.getSeconds();
        var dateStr = M + D + h + m; //呀麻碟
        // 输出结果：2014-04-23 18:55:49
        return dateStr;
      },

      closeDialog() {
        this.scoreDialog = false;
      },

      setRating(rating) {
        console.log(rating);
        let _this = this;
        this.$http.post('score/user/' + _this.accountId, {
          score: rating
        }).then(
          function (response) {
            _this.closeDialog();
            if (response.data.code === '0') {
              util.toast('评分成功');
            }
          }
        ).catch(function (error) {
          _this.closeDialog();
        });
      }
    },
    mounted() {
      this.accountId = this.$route.params.accountId;
      console.log(this.accountId);
      this.scroller = document.getElementById('content');
      this.getUserEvaluates(false);
    }
  }

</script>

<style lang="less" scoped>

  /*@import "../assets/less/common.less";*/
  
  .evaluate-list {
    background-color: white;
    &-item {
      display: flex;
      justify-content: space-between;
      /*align-items: center;*/
      flex-direction: row;
      padding: 12px 24px;
      border-bottom: 1px solid #E6E6E6;
      &-left {
        display: flex;
        /*align-items: center;*/
        flex-direction: row;
        flex: 1;
        .avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
        }
        &-title {
          flex: 1;
          margin-left: 16px;
          .name {
            font-size: 16px;
            color: #333333;
          }
          .date {
            margin-left: 4px;
            font-size: 14px;
            color: #888888;
          }
          .evaluate {
            margin-top: 4px;
            font-size: 16px;
          }
        }
      }
      &-right {
        .date {
          color: #888888;
        }
      }
    }
  }
  
  .bottom {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    .inputC {
      flex: 1;
      margin: 4px 8px 0 8px;
    }
  }
  
  .score-dialog-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .score-dialog-msg {
      margin-bottom: 4px;
      color: #9c55a1;
    }
  }

</style>
